<template>
  <div class="contract">
    <el-row style="margin-bottom:20px">
      <el-col :offset="20">
        <el-button type="primary" icon="el-icon-plus" @click.native="toadd">新建合同</el-button>
      </el-col>
    </el-row>
    <div class="searchContent">
      <el-form :inline="true" label-width="120px" labelPosition="left" :model="searchForm">
        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="合同开始日期">
              <el-date-picker
                style="width:300px"
                type="daterange"
                v-model="searchForm.time"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="合同号">
              <el-input v-model="searchForm.code" placeholder="请输入合同号" style="width:300px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="广告主">
              <el-input v-model="searchForm.media_up_name" placeholder="请输入广告主" style="width:300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="待付款日期">
              <el-date-picker
                style="width:300px"
                type="daterange"
                v-model="searchForm.date_paid"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="代理商">
              <el-input v-model="searchForm.agent_name" placeholder="请输入代理商" style="width:300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="状态">
              <el-select v-model="searchForm.status" style="width:300px;" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-bottom:20px">
          <el-col :offset="1">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <contractListTable
          :tableData="tableData"
          @addPlay="addplay"
          @addRefundMoney="addRefundMoney"
          @handleCheck="handleCheck"
          @handleEdit="handleEdit"
          @handleResultOfPlay="handleResultOfPlay"
          @HandlePreSchedule="HandlePreSchedule"
          @handleResultUpload="handleResultUpload"
        ></contractListTable>
      </el-row>
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="per"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </div>

    <el-dialog
      title="添加补播"
      :visible.sync="addPlayShow"
      append-to-body
      :destroy-on-close="true"
      center
      width="60%"
    >
      <addPlayBox :id="currentId" ref="addPlayData"></addPlayBox>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addPlaySave">提 交</el-button>
        <el-button @click="addPlayShow = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看播放结果" :visible.sync="playResultShow" center width="60%">
      <playResult :id="currentId" ref="playResultShow"></playResult>
      <span slot="footer" class="dialog-footer">
        <el-button @click="playResultShow = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="上传播放结果" :visible.sync="uploadShow" center width="20%">
      <div class="fileBox">
        <div>
          <el-upload
            class="upload-demo"
            action="http://dev.media.xkphp.com/api/upload"
            multiple
            :on-success="resultSuccess"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div class="fileList" v-for="item in uploadList" :key="item.id">{{item.file_name}}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadFile">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import contractListTable from "./salesComponents/contractListTable.vue";
import addPlayBox from "./salesComponents/addPlayBox.vue";
import playResult from "./salesComponents/playResult.vue";
import formatEveryDay from "../add_contract/components/timeFormat.js";

import {
  getBuildContract,
  BuildContractFundLog,
  getRepairPlayList,
  addRepairPlayList,
  playResultUpLoad
} from "../../api/Salesman.js";
import { SETDATE } from "../../api/System.js";
import moment from "moment";
export default {
  components: {
    contractListTable,
    addPlayBox,
    playResult,

  },
  data() {
    return {
      searchForm: {
        time: "",
        date_paid: "",
        code: "",
        agent_name: "",
        media_up_name: "",
        status: ""
      },
      statusList: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "草稿"
        },
        {
          value: "2",
          label: "提交审核"
        },
        {
          value: "3",
          label: "通过"
        },
        {
          value: "4",
          label: "拒绝"
        }
      ],
      tableData: null,
      total: 0,
      currentPage: 1,
      per: 5,
      addPlayShow: false,
      currentId: "",
      playResultShow: false,
      uploadList: [],
      uploadShow: false,
      preScheduleShow:false
    };
  },
  methods: {
    handleSearch() {
      this.getBuildContractLIST();
    },
    handleSizeChange(e) {
      this.per = e;
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getBuildContractLIST();
    },
    getBuildContractLIST() {
      let obj = {
        start_time:
          this.searchForm.time != ""
            ? moment(this.searchForm.time[0]).unix()
            : "",
        end_time:
          this.searchForm.time != ""
            ? moment(this.searchForm.time[1]).unix()
            : "",
        start_date_paid:
          this.searchForm.date_paid != ""
            ? moment(this.searchForm.date_paid[0]).unix()
            : "",
        end_date_paid:
          this.searchForm.date_paid != ""
            ? moment(this.searchForm.date_paid[1]).unix()
            : "",
        code: this.searchForm.code,
        agent_name: this.searchForm.agent_name,
        media_up_name: this.searchForm.media_up_name,
        status: this.searchForm.status
      };
      let params = {
        page: this.currentPage,
        per: this.per,
        ...obj
      };
      getBuildContract(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.currentPage = res.data.current_page;
          this.total = res.data.total;
          this.tableData.forEach(element => {
            element.cycle = JSON.parse(element.cycle);
            // for (const key in element.cycle) {
            //   if (element.cycle.hasOwnProperty(key)) {
            //     const el = element.cycle[key];
            //     element.cycle[key] = SETDATE(el, true);
            //   }
            // }
          });
        }
      });
    },
    addplay(data) {
      this.currentId = data.id;
      this.addPlayShow = true;
    },
    addRefundMoney(data) {},
    handleResultOfPlay(data) {
      this.currentId = data.id;
      this.playResultShow = true;
    },
    HandlePreSchedule(data) {
      this.$router.push({
        path: "/preSchedule",
        query: {
          id: data.id
        }
      });
    },
    toadd() {
      this.$router.push({
        path: "/add",
        query: {
          type: 1
        }
      });
    },
    handleCheck(data) {
      this.$router.push({
        path: "/add",
        query: {
          type: 2,
          id: data.id
        }
      });
    },
    handleEdit(data) {
      this.$router.push({
        path: "/add",
        query: {
          type: 3,
          id: data.id
        }
      });
    },
    addPlaySave() {
      let data = {
        type: 1,
        id: this.currentId,
        help_remark: this.$refs.addPlayData.addForm.note,
        file: this.$refs.addPlayData.addForm.file_path.join(","),
        cycle: JSON.stringify({
          start_time: moment(this.$refs.addPlayData.addForm.time[0]).unix(),
          end_time: moment(this.$refs.addPlayData.addForm.time[1]).unix()
        }),
        resources: [],
        product: []
      };
      let resourcesList = this.$refs.addPlayData.resouceTable;
      resourcesList.forEach(e => {
        let obj = {
          id: e.id,
          often: e.often,
          second: e.second,
          expenses: e.expenses,
          fees: e.fees,
          remark: e.remark,
          player_date: JSON.stringify({
            type: 1,
            val: formatEveryDay(e.player_date[0], e.player_date[1])
          }),
          gift: e.gift || e.gift == 1 ? 1 : 0
        };
        data.resources.push(obj);
      });
      console.log(data);
      addRepairPlayList(data).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.addPlayShow = false;
        } else {
          this.$message.error("添加失败,请重试");
        }
      });
    },
    resultSuccess(response, file, fileList) {
      this.uploadList.push({
        file_name: file.name,
        file_path: file.response.data.path,
        id: file.response.data.id
      });
    },
    handleResultUpload(data) {
      this.currentId = data.id;
      this.uploadShow = true;
    },
    uploadFile() {
      let arr = [];
      this.uploadList.forEach(e => {
        arr.push(e.id);
      });
      playResultUpLoad(this.currentId, {
        file_ids: [...arr]
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("上传成功");
          this.uploadShow = false;
        } else {
          this.$message.error("上传失败");
        }
      });
    }
  },
  mounted() {
    this.getBuildContractLIST();
  },
  watch: {
    uploadShow() {
      this.uploadList = [];
    }
  }
};
</script>

<style lang='scss' scoped>
@import "./cssfile/contract.scss";
</style>
